﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>PetShop</title>
    <link href="semantic/packaged/css/semantic.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-2.1.1.js" type="text/javascript"></script>
    <script src="semantic/packaged/javascript/semantic.js" type="text/javascript"></script>
    <script src="Scripts/Welcome.js" type="text/javascript"></script>
    <link href="Themes/global.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/ProductGallery.js" type="text/javascript"></script>
    <script src="Scripts/Welcome.js" type="text/javascript"></script>
</head>
<body>
    <div class="main container">
        <!--Top navigation bar-->
        <div id="topBar" class="topBar">
            <div class="floatRight">
                <div class="ui icon input">
                    <input type="text" placeholder="Search...">
                    <i class="search icon"></i>
                </div>
                <div id="loginDiv" class="ui label" onclick="javascript:showLoginModal();">
                    <i class="user icon iconAnimation"></i>anonymous
                </div>
                <a href="CarritoCompras.htm"><i class="cart icon iconAnimation"></i></a>
            </div>
        </div>
        <!-- Header bar -->
        <div id="headerBar" class="headerBar">
            <a href="Welcome.htm">
                <img class="ui logo rounded image" src="Images/logo.jpg">
            </a>
            <div class="floatRight rightHeaderRail">
                <div class="floatRight">
                    <span>Síguenos en</span> <i class="facebook icon big iconAnimation"></i><i class="twitter icon big iconAnimation">
                    </i>
                </div>
                <div class="ui purple inverted menu">
                    <div class="active ui dropdown item">
                        Mascotas<i class="dropdown icon"></i>
                        <div class="menu">
                            <a class="item" href="ProductGallery.htm?galleryType=1">Perros</a> <a class="item"
                                href="ProductGallery.htm?galleryType=2">Gatos</a> <a class="item" href="ProductGallery.htm?galleryType=3">
                                    Conejos</a>
                        </div>
                    </div>
                    <div class="active ui dropdown item">
                        Productos<i class="dropdown icon"></i>
                        <div class="menu">
                            <a class="item">Collares</a> <a class="item">Alimento</a> <a class="item">Juguetes</a>
                        </div>
                    </div>
                    <a class="item" href="Contact.htm">Contacto </a>
                </div>
            </div>
        </div>
        <!-- Main content place holder -->
        <div class="ui tertiary form segment marginCero" id="tertiarySegment">
            <div class="field fieldCustomProperties" id="fieldParentDiv">
                <div id="perroContent" style="display: none;">
                    <div class="ui segment divContainerBoderTop" id="boderTopSegment">
                        <div class="ui ribbon label ribbonLabelBackgroundColor">
                            Mascotas</div>
                        <div>
                        </div>
                        <div class="ui breadcrumb">
                            <a class="section">Home</a> <i class="right arrow icon divider"></i><a class="section">
                                Mascotas</a> <i class="right arrow icon divider"></i>
                            <div class="active section">
                                Perros</div>
                        </div>
                        <div class="ui celled list">
                            <div class="item" onclick="javascript:showModal1();">
                                <img class="ui avatar image" src="Images/avatar.jpg">
                                <div class="content">
                                    <div class="header">
                                        Snickerdoodle</div>
                                    Una excelente compañía!
                                </div>
                                <div class="item" onclick="javascript:showModal2();">
                                    <img class="ui avatar image" src="Images/avatar2.jpg">
                                    <div class="content">
                                        <div class="header">
                                            Poodle</div>
                                        Un poodle, excelente mascota!
                                    </div>
                                </div>
                                <div class="item"  onclick="javascript:showModal3();">
                                    <img class="ui avatar image" src="Images/avatar3.jpg">
                                    <div class="content">
                                        <div class="header">
                                            Paulo</div>
                                        Les encantan los niños!
                                    </div>
                                </div>
                            </div>
                            <div class="ui pagination menu customPagination">
                                <a class="icon item"><i class="left arrow icon"></i></a><a class="active item">1
                                </a><a class="item">2 </a><a class="item">3 </a><a class="item">4 </a><a class="icon item">
                                    <i class="right arrow icon"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="gatoContent" style="display: none;">
                    <div class="ui segment divContainerBoderTop" id="Div2">
                        <div class="ui ribbon label ribbonLabelBackgroundColor">
                            Mascotas</div>
                        <div>
                        </div>
                        <div class="ui breadcrumb">
                            <a class="section">Home</a> <i class="right arrow icon divider"></i><a class="section">
                                Mascotas</a> <i class="right arrow icon divider"></i>
                            <div class="active section">
                                Gatos</div>
                        </div>
                        <div class="ui celled list">
                            <div class="item">
                                <img class="ui avatar image" src="Images/cloudy.jpg">
                                <div class="content">
                                    <div class="header">
                                        Europeo</div>
                                    Come ratones...
                                </div>
                            </div>
                            <div class="item">
                                <img class="ui avatar image" src="Images/angora.jpg">
                                <div class="content">
                                    <div class="header">
                                        Angora</div>
                                    Un peluchito!!!
                                </div>
                            </div>
                            <div class="item">
                                <img class="ui avatar image" src="Images/gatoEgipcio.jpg">
                                <div class="content">
                                    <div class="header">
                                        Egipcio</div>
                                    Da miedo...
                                </div>
                            </div>
                        </div>
                        <div class="ui pagination menu customPagination">
                            <a class="icon item"><i class="left arrow icon"></i></a><a class="active item">1
                            </a><a class="item">2 </a><a class="item">3 </a><a class="item">4 </a><a class="icon item">
                                <i class="right arrow icon"></i></a>
                        </div>
                    </div>
                </div>
                <div id="productoContent" style="display: none;">
                    <div class="ui segment divContainerBoderTop" id="Div4">
                        <div class="ui ribbon label ribbonLabelBackgroundColor">
                            Mascotas</div>
                        <div>
                        </div>
                        <div class="ui breadcrumb">
                            <a class="section">Home</a> <i class="right arrow icon divider"></i><a class="section">
                                Productos</a> <i class="right arrow icon divider"></i>
                            <div class="active section">
                                Alimento</div>
                        </div>
                        <div class="ui celled list">
                            <div class="item">
                                <img class="ui avatar image" src="Images/avatar.jpg">
                                <div class="content">
                                    <div class="header">
                                        Dog Chow</div>
                                    Un perro grande y fuerte
                                </div>
                            </div>
                            <div class="item">
                                <img class="ui avatar image" src="Images/avatar2.jpg">
                                <div class="content">
                                    <div class="header">
                                        Cat Chow</div>
                                    Puuurrrdelicius!
                                </div>
                            </div>
                            <div class="item">
                                <img class="ui avatar image" src="Images/avatar3.jpg">
                                <div class="content">
                                    <div class="header">
                                        Happy Fish</div>
                                    Glu Glu Glup!
                                </div>
                            </div>
                        </div>
                        <div class="ui pagination menu customPagination">
                            <a class="icon item"><i class="left arrow icon"></i></a><a class="active item">1
                            </a><a class="item">2 </a><a class="item">3 </a><a class="item">4 </a><a class="icon item">
                                <i class="right arrow icon"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Footer -->
        <div class="footer customBorderFooter">
            <div class="ui horizontal list customPagination">
                <div class="item customFooterFontText customFooterColMargin">
                    Servicio al Cliente
                    <div class="ui inverted link list">
                        <a class="item customFooterSubtitleFontText">Politícas</a> <a class="item customFooterSubtitleFontText">
                            Preguntas Frecuentes</a>
                    </div>
                </div>
                <div class="item customFooterFontText customFooterColMargin">
                    Formas de Pago
                    <div class="ui inverted link list">
                        <a class="item customFooterSubtitleFontText">Tarjetas</a> <a class="item customFooterSubtitleFontText">
                            Pago contra entrega</a>
                    </div>
                </div>
                <div class="item customFooterFontText">
                    Contáctenos
                    <div class="ui inverted link list">
                        <a class="item customFooterSubtitleFontText linkFontStyleNormal" href="Contact.htm">
                            Nos puedes contactar</a> <a class="item customFooterSubtitleFontText linkFontStyleNormal"
                                href="Contact.htm">usando nuestro formulario</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Login modal-->
    <div class="ui login modal small">
        <i class="close icon"></i>
        <div class="header">
            Login
        </div>
        <div class="content">
            <div class="ui input" style="margin-bottom: 10px;">
                <input type="text" placeholder="Username" />
            </div>
            <div class="ui input">
                <input type="text" placeholder="Password" />
            </div>
        </div>
        <div class="actions">
            <div class="ui button">
                Cancelar
            </div>
            <div class="ui button">
                Ingresar
            </div>
        </div>
    </div>
    <!-----------------------------------Modales--------------------------------->

    <div class="ui small modal" id="modal1">
        <i class="close icon"></i>
        <div class="header">
            Snickerdoodle
        </div>
        <div class="content">
            <div class="left">
                <img class="ui medium image" src="Images/avatar.jpg">
            </div>
            <div class="right">
                <div class="ui blue labels" style="margin-top: 50px;">
                    <a class="ui label">Precio
                        <div class="detail">
                            $600</div>
                    </a>
                </div>
                <div style="height: 50px;">
                </div>
                <div class="ui dropdown">
                    <div class="text">
                        Cantidad</div>
                    <i class="dropdown icon"></i>
                    <div class="menu">
                        <div class="item">
                            1</div>
                        <div class="item">
                            2</div>
                        <div class="item">
                            3</div>
                    </div>
                </div>
                <div class="actions" style="margin-top: 50px;">
                    <div class="ui
    teal button">
                        Agregar al carrito
                    </div>
                </div>
            </div>
        </div>
        <div class="actions">
            <div class="ui button" onclick="javascript:hideModal1();">
                Cancelar
            </div>
            <div class="ui button" onclick="javascript:hideModal1();">
                Ok
            </div>
        </div>
    </div>
    
    <div class="ui small modal" id="modal2">
        <i class="close icon"></i>
        <div class="header">
            Poodle
        </div>
        <div class="content">
            <div class="left">
                <img class="ui medium image" src="Images/avatar2.jpg">
            </div>
            <div class="right">
                <div class="ui blue labels" style="margin-top: 50px;">
                    <a class="ui label">Precio
                        <div class="detail">
                            $300</div>
                    </a>
                </div>
                <div style="height: 50px;">
                </div>
                <div class="ui dropdown">
                    <div class="text">
                        Cantidad</div>
                    <i class="dropdown icon"></i>
                    <div class="menu">
                        <div class="item">
                            1</div>
                        <div class="item">
                            2</div>
                        <div class="item">
                            3</div>
                    </div>
                </div>
                <div class="actions" style="margin-top: 50px;">
                    <div class="ui
    teal button">
                        Agregar al carrito
                    </div>
                </div>
            </div>
        </div>
        <div class="actions">
            <div class="ui button" onclick="javascript:hideModal2();">
                Cancelar
            </div>
            <div class="ui button" onclick="javascript:hideModal2();">
                Ok
            </div>
        </div>
    </div>
    
    
      <div class="ui small modal" id="modal3">
        <i class="close icon"></i>
        <div class="header">
            Paulo
        </div>
        <div class="content">
            <div class="left">
                <img class="ui medium image" src="Images/avatar3.jpg">
            </div>
            <div class="right">
                <div class="ui blue labels" style="margin-top: 50px;">
                    <a class="ui label">Precio
                        <div class="detail">
                            $200</div>
                    </a>
                </div>
                <div style="height: 50px;">
                </div>
                <div class="ui dropdown">
                    <div class="text">
                        Cantidad</div>
                    <i class="dropdown icon"></i>
                    <div class="menu">
                        <div class="item">
                            1</div>
                        <div class="item">
                            2</div>
                        <div class="item">
                            3</div>
                    </div>
                </div>
                <div class="actions" style="margin-top: 50px;">
                    <div class="ui
    teal button">
                        Agregar al carrito
                    </div>
                </div>
            </div>
        </div>
        <div class="actions">
            <div class="ui button" onclick="javascript:hideModal3();">
                Cancelar
            </div>
            <div class="ui button" onclick="javascript:hideModal3();">
                Ok
            </div>
        </div>
    </div>

</body>
</html>
